import React, { Component } from 'react';
import './index.less';
import NavBar from '../../components/navbar';
import LoginForm from '../../components/loginform';
import section_1_img from '../../images/screen_1-img.png';
import section_2_img_1 from '../../images/screen_2-img-1.png';
import section_2_img_2 from '../../images/screen_2-img-2.png';
import section_2_img_3 from '../../images/screen_2-img-3.png';
import section_2_img_4 from '../../images/screen_2-img-4.png';
import section_3_img_1 from '../../images/screen_4-img-1.png';
import section_3_img_2 from '../../images/screen_4-img-2.png';
import section_3_img_3 from '../../images/screen_4-img-3.png';
import section_3_img_4 from '../../images/screen_4-img-4.png';

class App extends Component {
    render() {
        const section_2 = [
            {
                img: section_2_img_1,
                t1: '本地课程',
                t2: '专业的本地教研团队',
                t3: '让学习更有针对性'
            },
            {
                img: section_2_img_2,
                t1: '在线直播',
                t2: '在线还原真实的课堂环境',
                t3: '打破时空限制，将时间还给学习'
            },
            {
                img: section_2_img_3,
                t1: '个性辅导',
                t2: '一个孩子，两位老师',
                t3: '实时关注孩子学习全流程'
            },
            {
                img: section_2_img_4,
                t1: '智能课堂',
                t2: '多种课堂表现形式',
                t3: '学习档案数字化，效果实时追踪'
            }
        ]
        const section_3 = [
            {
                img: section_3_img_1,
                t1: '本地课程',
                t2: '什么是本地课程？',
                t3: '学而思独立自主的教研团队，依托本地化内容量身设计课程<br />教研团队均拥有多年当地一线教研经验，更懂孩子，更懂教育',
            },
            {
                img: section_3_img_2,
                t1: '在线直播',
                t2: '什么是学而思在线直播？',
                t3: '学而思老师在线直播，在家就能上课，高度还原真实课堂环境<br />不再浪费时间在路上，省下一半的时间专注学习本身<br />班课、小组课等多种学习方式，营造良好的学习氛围，让进步不再孤单',
            },
            {
                img: section_3_img_3,
                t1: '个性辅导',
                t2: '什么是个性辅导？',
                t3: '每个孩子搭配两位老师，授课老师专注传授知识，辅导老师督促落实和答疑解惑<br />预习——上课——练习——订正——整理——评析——辅导<br />个性辅导贯穿完整的教学环节',
            },
            {
                img: section_3_img_4,
                t1: '智能课堂',
                t2: '什么是学而思智能课堂？',
                t3: '文字、语音、视频等多种互动形式、选择、抢答、口述等各类学习形式，牢牢抓住孩子注意力<br />学习档案数字化、学习效率实时追踪、课后练习针对性批改，所有学习问题及时解决',
            }
        ]
        return (
            <div className="App">
                <div className="bg-2" />
                <NavBar />
                <div className="main-section">
                    <div className="section-1">
                        <img src={section_1_img} alt="" className="section-1-img" />
                        <LoginForm className="login-box" />
                    </div>
                    <ul className="section-2 clearfix">
                        {
                            section_2.map((item, index) => {
                                return <li key={index}>
                                    <div className="img-box">
                                        <img src={item.img} alt="" />
                                    </div>
                                    <div className="footer">
                                        <p className="title">{item.t1}</p>
                                        <p>{item.t2}</p>
                                        <p>{item.t3}</p>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                    <ul className="section-3">
                        {
                            section_3.map((item, index) => {
                                const className = `clearfix ${index % 2 === 0 ? 'model-1' : 'model-2'}`
                                return <li className={className} key={index}>
                                    <img src={item.img} alt="" className="big-img" />
                                    <div className="info">
                                        <div className="text">
                                            学而思在线为您提供
                                    <span>{item.t1}</span>
                                            <div className="buttom-line"></div>
                                        </div>
                                        <h3>{item.t2}</h3>
                                        <p dangerouslySetInnerHTML={{__html: item.t3}}>
                                        </p>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
        );
    }
}

export default App;